import QtQuick
import FluentUI
import QtQuick.Layouts
import QtQuick.Controls

FluRectangle {
    color: "#FFFFFF"

    // 标记是否正在改变高度
    property bool isChanging: false

    Column {
        anchors.fill: parent
        // 聊天记录展示区
        FluRectangle {
            id: chatHistoryRect
            width: parent.width
            height: parent.height * 0.618
            color: "#FFFFFF"

            ListModel {
                id: chatHistoryListModel
            }

            ListView {
                id: chatHistoryListView
                anchors.fill: parent
                model: chatHistoryListModel
                spacing: 10

                // 展示模型
                delegate: FluRectangle {
                    width: chatHistoryText.width + 15
                    height: chatHistoryText.height + 15
                    color: (identity === "server" ? "#B8CFFF" : "#EBF3FF")
                    radius: (identity === "server" ? [15, 15, 15, 2] : [15, 15, 2, 15])
                    x: (identity === "server" ? parent.width * 0.02 : parent.width * 0.98 - width)
                    Text {
                        id: chatHistoryText
                        anchors.centerIn: parent
                        text: message
                        font.pointSize: 12 * fontSizeFactor
                        font.family: "MiSans"
                        color: "#0A1629"
                        wrapMode: Text.WordWrap
                        width: if (message.length > 38) {
                            width: chatHistoryRect.width * 0.8
                        }
                    }
                }
            }
        }

        Rectangle {
            width: parent.width
            height: 1
            color: "#3F8CFF"
        }
        // 动画区域
        FluRectangle {
            width: parent.width
            height: parent.height * 0.0955
            Row {
                anchors.fill: parent
                // 占位Rectangle
                Rectangle {
                    width: parent.width * 0.05
                    height: parent.height
                    color: "transparent"
                }

                // 当前说话角色图片，用于区分角色
                FluClip {
                    anchors.verticalCenter: parent.verticalCenter
                    radius: [width / 2, width / 2, width / 2, width / 2]
                    width: parent.height * 0.8
                    height: parent.height * 0.8
                    FluImage {
                        anchors.fill: parent
                        fillMode: Image.PreserveAspectFit
                        source: "qrc:/image/image/profile.png"
                    }
                }

                // 占位Rectangle
                Rectangle {
                    width: parent.width * 0.05
                    height: parent.height
                    color: "transparent"
                }
            }

            // 录音或者播放动画
            FluRectangle {
                id: recordingAnimationRect
                width: parent.width * 0.3
                height: parent.height
                anchors.centerIn: parent
                color: "transparent"
                Row {
                    anchors.fill: parent
                    spacing: parent.width * 0.03
                    Repeater {
                        id: repeater
                        model: 22 // 动态创建10个FluRectangle
                        delegate: FluRectangle {
                            width: parent.width * 0.015
                            height: parent.height * 0.1
                            anchors.verticalCenter: parent.verticalCenter

                            Gradient {
                                id: gradient
                                GradientStop {
                                    position: 0.0; color: "#92FFC0"
                                }
                                GradientStop {
                                    position: 1.0; color: "#0396FF"
                                }
                            }
                            Rectangle {
                                anchors.fill: parent
                                gradient: gradient
                            }

                            // 确保NumberAnimation已正确附加
                            property alias heightAnimation: heightAnimation
                            NumberAnimation on height {
                                id: heightAnimation
                                duration: 300
                                easing.type: Easing.Linear
                            }
                        }
                    }
                }
            }
        }

        ScrollView {
            clip: true
            width: parent.width
            height: parent.height * 0.16
            FluMultilineTextBox {
                id: messageTextBox
                placeholderText: "请输入要发消息、回车键发送"
            }
        }

        // 功能区域
        FluRectangle {
            width: parent.width
            height: parent.height * 0.126
            color: "#FFFFFF"

            Row {
                anchors.fill: parent

                // 占位
                Rectangle {
                    width: parent.width * 0.05
                    height: parent.height
                    color: "transparent"
                }

                FluTextButton {
                    width: parent.width * 0.1
                    height: parent.height * 0.5
                    anchors.verticalCenter: parent.verticalCenter
                    text: "记录错题"
                    font.family: "MiSans"
                    font.pointSize: 9 * fontSizeFactor
                }

                // 占位
                Rectangle {
                    width: parent.width * 0.05
                    height: parent.height
                    color: "transparent"
                }

                FluTextButton {
                    width: parent.width * 0.1
                    height: parent.height * 0.5
                    anchors.verticalCenter: parent.verticalCenter
                    text: "切换题目"
                    font.family: "MiSans"
                    font.pointSize: 9 * fontSizeFactor
                }

                // 占位
                Rectangle {
                    width: parent.width * 0.05
                    height: parent.height
                    color: "transparent"
                }

                FluTextButton {
                    width: parent.width * 0.1
                    height: parent.height * 0.5
                    anchors.verticalCenter: parent.verticalCenter
                    text: "提升难度"
                    font.family: "MiSans"
                    font.pointSize: 9 * fontSizeFactor
                }

                // 占位
                Rectangle {
                    width: parent.width * 0.05
                    height: parent.height
                    color: "transparent"
                }

                FluTextButton {
                    width: parent.width * 0.1
                    height: parent.height * 0.5
                    anchors.verticalCenter: parent.verticalCenter
                    text: "降低难度"
                    font.family: "MiSans"
                    font.pointSize: 9 * fontSizeFactor
                }

                // 占位
                Rectangle {
                    width: parent.width * 0.05
                    height: parent.height
                    color: "transparent"
                }

                FluTextButton {
                    width: parent.width * 0.1
                    height: parent.height * 0.5
                    anchors.verticalCenter: parent.verticalCenter
                    text: "开启麦克风"
                    font.family: "MiSans"
                    font.pointSize: 9 * fontSizeFactor
                    onClicked: {
                        if (!isChanging) {
                            text = "关闭麦克风"
                            isChanging = true
                            startChangingHeights()
                        } else {
                            isChanging = false
                            text = "开启麦克风"
                        }
                    }
                }
            }

            FluFilledButton {
                id: loginButton
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                width: parent.width * 0.18
                height: parent.height * 0.5
                text: "发送"
                font.family: "MiSans"
                font.pointSize: 9 * fontSizeFactor
                normalColor: "#3F8CFF"
                onClicked: {
                    if (messageTextBox.text === "") {
                        showWarning("请先输入内容")
                    } else {
                        chatHistoryListModel.append({
                            "message": messageTextBox.text,
                            "identity": "user"
                        })
                        messageTextBox.text = ""
                    }
                }
            }
        }
    }

    function startChangingHeights() {
        var parentHeight = recordingAnimationRect.height * 0.8;

        // 找到recordingAnimationRect内部的Row布局中的Repeater元素
        var repeater = null;
        for (var i = 0; i < recordingAnimationRect.children.length; i++) {
            var child = recordingAnimationRect.children[i];
            if (child instanceof Row) {
                for (var j = 0; j < child.children.length; j++) {
                    var innerChild = child.children[j];
                    if (innerChild instanceof Repeater) {
                        repeater = innerChild;
                        break;
                    }
                }
            }
            if (repeater) break;
        }

        if (repeater) {

            for (var k = 0; k < repeater.count; ++k) {
                var child = repeater.itemAt(k);
                if (child instanceof FluRectangle) {
                    changeFluRectangleHeights(child, parentHeight);
                }
            }
            if (isChanging) {
                Qt.callLater(startChangingHeights, 600); // 递归调用以持续改变高度
            }
        }
    }

    function changeFluRectangleHeights(rectangle, maxHeight) {
        var randomHeight = getRandomHeight(maxHeight);

        // 确保heightAnimation已正确附加
        if (rectangle.heightAnimation) {
            rectangle.heightAnimation.from = rectangle.height;
            rectangle.heightAnimation.to = randomHeight;
            rectangle.heightAnimation.start();
        }
    }

    function getRandomHeight(maxHeight) {
        return Math.random() * maxHeight;
    }
}